<script setup>
import { storeToRefs } from 'pinia'
import { useMusicStore } from '../store/music'
import { formattedTime, musicLevel } from '../common/index'
import PlayIcon from './PlayIcon.vue'

const { playMusic } = storeToRefs(useMusicStore())

const props = defineProps({
  item: {
    type: Object,
    default() {
      return {}
    }
  },
  index: {
    type: Number,
    default: 0
  }
})
</script>

<template>
  <div class="songs-item">
    <div v-if="playMusic.id === item.id" class="song-num">
      <play-icon />
    </div>
    <div v-if="index && playMusic.id !== item.id" class="song-num">{{ index < 10 ? '0' + index : index }}</div>
    <div class="tr">
      <img class="songs-item-img" :src="item.album.picUrl" alt="" />
      <div class="song-info">
        <span class="songs-name">{{ item.name + item.alias.join(' ') }}</span>
        <div class="s-info">
          <span class="music-level">{{ musicLevel(item.privilege.downloadMaxBrLevel).name }}</span>
          <span v-if="item.mvid" class="music-mv">MV<span class="iconfont icon-bofang"></span></span>
          <span v-for="(n , index) in item.artists" :key="n.id" class="m-artist">
            {{ n.name + (index+1!==item.artists.length?'/':'') }}
          </span>
        </div>
      </div>
    </div>
    <div class="tr">
      <span>{{ item.album.name }}</span>
    </div>
    <div class="song-num">
      <span class="iconfont icon-aixin"></span>
    </div>
    <div class="song-num">
      {{ formattedTime(item.duration) }}
    </div>
  </div>
</template>

<style scoped lang="scss">
@mixin boxCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.songs-item {
  height: 80px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .5s;
  margin: 8px 0;
  //&:hover {
  //  background: #fff;
  //  border-radius: 8px;
  //  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  //}
}
.song-num {
  width: 50px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #515c67;
  @include boxCenter;
  .iconfont {
    font-size: 15px;
  }
}
.tr {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.song-info {
  flex: 1;
  margin-left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.songs-item-img {
  width: 70px;
  height: 70px;
  border-radius: 6px;
}
.songs-name {
  flex: 1;
  font-size: 13px;
  text-align: left;
  letter-spacing: 1px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-level {
  border: 1px solid #FFD700;
  color: #FFD700;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 4px;
}
.music-mv {
  border: 1px solid #FF4136;
  color: #FF4136;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 4px;
  .iconfont {
    font-size: 10px;
  }
}
.s-info {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.m-artist {
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
